<template>
    <div class="divEcharts" ref="radarID"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        arrRadar: Array
    },
    mounted() {
        this.getEcharts();
    },
    watch: {
        arrRadar: {
            handler(newData, oldData) {
                this.getEcharts();
            },
            deep: true,  //深度监听，默认为false
            // immediate: true //首次就执行，默认false
        }
    },
    methods: {
        getEcharts() {
            const myChart = echarts.init(this.$refs.radarID, 'dark');
            myChart.setOption({
                title: {
                    text: '空气质量'
                },
                label: {
                    show: true,
                    position: 'top'
                },
                radar: {
                    // shape: 'circle',
                    indicator: [
                        { name: '臭氧', max: 200 },
                        { name: '一氧化碳', max: 5 },
                        { name: '二氧化氮', max: 100 },
                        { name: '二氧化硫', max: 100 },
                        { name: 'pm2.5', max: 250 },
                        { name: 'pm10', max: 200 }
                    ],
                    // name: {
                    //     textStyle: {
                    //         color: 'red'
                    //     }
                    // }
                },
                series: [
                    {
                        name: 'Budget vs spending',
                        type: 'radar',
                        data: [
                            {
                                value: this.arrRadar,
                                name: 'Allocated Budget'
                            }
                        ]
                    }
                ]

            });
        }
    }

}
</script>

<style>
.divEcharts {
    margin-left: 6px;
    margin-top: 6px;
    width: 97%;
    height: 97%;
    border: 0px blue solid;
    border-radius: 10px;
    box-shadow: 0px -5px 4px 0px #2279ee,
        -6px 0px 4px 0px #2279ee,
        6px 0px 4px 0px #2279ee,
        0px 5px 4px 0px #2279ee;
}
</style>